Overview

You are well on your way to developing an app for a real-life scenario. This proves your knowledge and capabilities in Android development and can open future job opportunities in the App development industry. Well done! The next step in developing your app and the focus of this exercise is developing the Profile screen. By now, your app allows users to register on the Little Lemon food ordering app by following the steps outlined in the onboarding flow. In this exercise, you will implement all the UI elements for the Profile screen.

Scenario

Users will be able to navigate to the Profile screen from the Home screen while using the Little Lemon food ordering app. Your app should allow users to view their personal information such as their first name, last name and email address on the Profile screen. Note that you are not required to allow users to update their information for this project, but they should be able to log out via the Profile screen.

Prerequisites

By now you should have created a Profile.kt file. If you haven't done so, under the application package name, create a new file called Profile.kt . This file will hold the Profile Composable, representing the Profile screen and its preview.

Instructions

Note that the following steps can be completed in any order to implement the different UI elements.

Step 1: Add the Header

Open the Profile.kt file and then:

• Create the Profile Composable

• Create the Profile Composable preview

• Inside the Profile Composable, implement a header at the top of the screen. Add the Image Composable with the logo.png file.

Step 2: Display user data

• Below the header add the text "Profile information:" using the Text Composable.

• Display multiple Text Composables below one another to present the user registration information:

  • Present Text to display the user’s first name

  • Present Text to display the user’s last name

  • Present Text to display the user’s email address

• Use the Column Composable to arrange items

• Retrieve the first name, last name and email address from the shared preferences and display them on the screen.

Step 3: Log out button

The final step in setting up the Profile screen is to implement a logout button.

• Add a Button Composable to the screen below the last Text Composable at the bottom

• Set its label to "Log out"

When a user clicks on the Log out button, your app should clear all the data from shared preferences and navigate to the Onboarding screen.

Tip: To implement a click handler, leverage the onClick from the Button Composable.

Step 4: Navigate to the Profile screen

• Open the Home.kt and add an Image Composable with the logo.png file asset in the center

• Add a header containing an Image Composable with the profile.png file asset on the right side. This item will serve as a button to open the Profile screen.

• Add the code to navigate from the Home screen to the Profile screen by using the onClick handler and navController .

Design

Use the following mockup as a reference to guide you when developing the profile page. Bear in mind you don’t have to replicate the design as is it, and you are free to come up with any tweaks you wish, such as the position of elements and their dimensions.

Conclusion

In this exercise, you created the UI of the Profile screen. You added a header at the top of the screen with the text Profile and Text Composables to display the user details and implemented the logout functionality. You also added a Profile button on the Home screen which allows users to navigate to the Profile screen.